<template>
  <!-- 用户健康度检测 -->
  <view class="health">
    <!-- 添加记录 -->
    <view class="health-info">
      <view class="title">
        体温：<text v-if="temperature && temperature.length">{{ temperature[0].temperature }}</text>
      </view>
      <view class="sub-title">
        <text v-if="temperature && temperature.length">
          {{ temperature[0].character || temperature[0].desc }}
        </text>
      </view>
    </view>
    <view class="manage">
      <view class="btn" @tap="openTempDialog">
        <view class="btn-icon warning">
          <m-icon type="compose"></m-icon>
        </view>
        <text>记录体温及体征</text>
      </view>
      <!-- <view class="btn" @tap="openDescDialog">
        <view class="btn-icon error">
          <m-icon type="plus-filled"></m-icon>
        </view>
        <text>异常体征</text>
      </view> -->
    </view>
    <!-- 图表 -->
    <view class="charts">
      <text class="title ml12">体温趋势</text>
      <text class="sub-title">（单位：℃）</text>
      <view class="charts-box">
        <qiun-data-charts v-if="showCharts" :opts="opts" type="tline" :chartData="chartData" :errorShow="false" :canvas2d="true" background="none" :tooltipShow="false" :tapLegend="false" />
      </view>
    </view>
    <!-- 记录 -->
    <view class="wrapper">
      <!-- <v-tabs v-model="currentTab" :tabs="tabs" lineHeight="4rpx"></v-tabs> -->
      <view v-if="currentTab === 0">
        <text class="title">体温及体征记录</text>
        <m-card v-for="(item, index) in temperature" :id="index" :key="item.id" :date="item.date" :status="item.status" :value="item.temperature" :desc="item.character || item.desc" @onEdit="editTempDialog(index)" @onDel="temDel(index)"></m-card>
        <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
      </view>
      <!-- <view v-else>
        <text class="title">异常体征记录</text>
        <text-card v-for="(item, inx) in abnormal" :id="inx" :key="item.id" :date="item.date" :text="item.desc" @onEdit="editDescDialog" @onDel="descDel"></text-card>
        <v-empty :isShow="!abnormal.length" text="暂无相关记录"></v-empty>
      </view> -->
    </view>
    <!-- 体温弹窗 -->
    <uni-popup ref="temPopup" type="dialog">
      <uni-popup-dialog ref="tempDialog" title="输入体温及体征" @confirm="temConfirm" @close="temClose">
        <view class="health-dialog">
          <input class="uni-dialog-input mb12" v-model="temp.temperature" type="text" placeholder="请输入体温如:36.5" />
          <input class="uni-dialog-input" v-model="temp.desc" type="text" placeholder="请输入体征描述" />
        </view>
      </uni-popup-dialog>
    </uni-popup>
    <!-- 异常记录 -->
    <!-- <uni-popup ref="descPopup" type="dialog">
      <uni-popup-dialog ref="descDialog" :value="temp.desc" mode="input" title="输入异常体征" placeholder="请输入异常体征" @confirm="descConfirm" @close="descClose"></uni-popup-dialog>
    </uni-popup> -->
  </view>
</template>
<script>
  import UniCard from '@/components/m-card/uni-card.vue';
  import MCard from '@/components/m-card/m-card.vue';
  import TextCard from '@/components/m-card/text-card.vue';
  import PaneCard from '@/components/m-card/pane-card.vue';
  import MIcon from '@/components/m-icon/m-icon.vue';
  import VTabs from '@/components/v-tabs/index.vue';
  import VEmpty from '@/components/v-empty/index.vue';
  import ChartConfig from '@/components/v-chart/config';
  import Api from '@/api/main';
  export default {
    components: {
      UniCard,
      MCard,
      TextCard,
      PaneCard,
      MIcon,
      VTabs,
      VEmpty
    },
    data() {
      return {
        opts: {
          ...ChartConfig
        },
        currentTab: 0,
        tabs: ['体温记录', '体征记录'],
        showCharts: true,
        uid: '',
        // 异常体征
        abnormal: [
          // {
          //   id: 1,
          //   // 日期
          //   date: '2021/01/24',
          //   // 异常描述
          //   desc: '没问题啊'
          // }
        ],
        showEmpty: false,
        // 体温数据
        temperature: [
          // {
          //   id: 1,
          //   // 日期
          //   date: '2021/01/24',
          //   // 体温
          //   temperature: '35.0',
          //   // 状态 0正常，1异常
          //   status: 0,
          //   // 异常体征code
          //   desc: '03',
          //   // 异常体征描述
          //   character: '咳嗽'
          // },
          // {
          //   id: 2,
          //   // 日期
          //   date: '2021/01/24',
          //   // 体温
          //   temperature: '35.0',
          //   // 状态 0正常，1异常
          //   status: 0
          // }, {
          //   id: 3,
          //   // 日期
          //   date: '2021/01/24',
          //   // 体温
          //   temperature: '35.0',
          //   // 状态 0正常，1异常
          //   status: 0
          // }
        ],
        // 体温
        temp: {},
        // 异常描述
        desc: {}
      };
    },
    computed: {
      chartData() {
        const categories = this.temperature.map(tem => {
          return tem.date
            .split('/')
            .slice(1)
            .join('/');
        });
        const date = this.temperature.map(tem => tem.temperature);
        return {
          categories,
          series: [
          {
            data: date
          }]
        };
      }
    },
    methods: {
      editTempDialog(id) {
        const temp = Object.assign({}, this.temperature[id]);
        // this.openTempDialog();
        console.log('uid', this.uid);
        console.log('temp', temp);
        const url = `/pages/user/health-add?uid=${this.uid}&id=${temp.id}&temperature=${temp.temperature}&desc=${temp.desc}`
        console.log('url', url);
        uni.navigateTo({
          url
        })
      },
      // editDescDialog(id) {
      //   this.desc = Object.assign({}, this.abnormal[id]);
      //   this.openDescDialog();
      // },
      openTempDialog() {
        // this.$refs.temPopup.open();
        uni.navigateTo({
          url: '/pages/user/health-add'
        })
      },
      openDescDialog() {
        this.$refs.descPopup.open();
      },
      temClose() {
        this.temp = {};
      },
      // 新增
      temConfirm(val = {}) {
        val = Object.assign({}, this.temp, val)
        this.temp.id ? this.updateTemperature(this.temp.id, val) : this.addTemperature(val);
        this.$nextTick(() => {
          this.temp = {};
        })
      },
      temDel(id) {
        console.log('id', id);
        uni.showModal({
          title: '删除提示',
          content: '是否删除该条记录？',
          success: res => {
            if (res.confirm) {
              console.log('用户点击确定' + id);
              this.delTemperature(id);
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      // descClose() {
      //   this.desc = {};
      // },
      // descConfirm(val) {
      //   console.log('descConfirm', val);
      //   this.desc.id ? this.updateAbnormalDesc(this.desc.id, val) : this.addAbnormalDesc(val);
      //   this.desc = {};
      // },
      // descDel(id) {
      //   uni.showModal({
      //     title: '删除提示',
      //     content: '是否删除该条记录？',
      //     success: res => {
      //       if (res.confirm) {
      //         console.log('用户点击确定' + id);
      //         this.delAbnormalDesc(id);
      //       } else if (res.cancel) {
      //         console.log('用户点击取消');
      //       }
      //     }
      //   });
      // },
      // 重绘表格
      reloadCharts() {
        this.showCharts = false
        this.$nextTick(() => {
          this.showCharts = true
        })
      },
      // 增加体温
      async addTemperature(val = {}) {
        const res = await this.$http.post(Api.addTemperature, { ...val, uid: this.uid });
        if (res) {
          this.$toast('更新成功');
          this.getTemperature();
        } else {
          // this.$toast('更新成功');
        }
      },
      // 查询温度列表
      async getTemperature(uid) {
        console.log('uid', uid);
        const res = await this.$http.post(Api.getTemperature, { uid });
        console.log('getTemperature', res);
        if (res) {
          this.temperature = [].concat(res);
          this.reloadCharts()
          this.showEmpty = !this.temperature.length
        }
        return;
      },
      // 删除一条体温
      async delTemperature(index) {
        console.log(index);
        const { id } = this.temperature[index];
        console.log('del-tem-id', id);
        const res = await this.$http.post(Api.deleteTemperature, { id, uid: this.uid });
        if (res) {
          this.$toast('删除成功');
          this.getTemperature();
        } else {
          // this.$$toast('删除失败');
        }
      },
      // 修改体温
      async updateTemperature(id, value) {
        console.log('update-tem', id, value);
        const res = await this.$http.post(Api.updateTemperature, { id, temperature: value.temperature, desc: value.desc, uid: this.uid });
        if (res) {
          this.$toast('修改成功');
          this.getTemperature();
        } else {
          // this.$toast('修改失败');
        }
      },
      // // 获取异常记录
      // async getAbnormal() {
      //   const res = await this.$http.post(Api.getAbnormalDesc);
      //   console.log('getAbnormal', res);
      //   if (res) {
      //     this.abnormal = [].concat(res);
      //   }
      //   return;
      // },
      // 删除单条体温
      async delAbnormalDesc(index) {
        const { id } = this.abnormal[index];
        console.log('del-desc-id', id);
        const res = await this.$http.post(Api.deleteAbnormalDesc, { id, uid: this.uid });
        if (res) {
          this.$toast('删除成功');
          this.getAbnormal();
        } else {
          // this.$toast('删除失败');
        }
      },
      // // 增加异常体征
      // async addAbnormalDesc(val) {
      //   const res = await this.$http.post(Api.addAbnormalDesc, { desc: val });
      //   if (res) {
      //     this.$toast('更新成功');
      //     this.getAbnormal();
      //   } else {
      //     // this.$toast('更新成功');
      //   }
      // },
      // 修改一场记录
      // async updateAbnormalDesc(id, value) {
      //   console.log('update-desc', id, value);
      //   const res = await this.$http.post(Api.updateAbnormalDesc, { id, desc: value });
      //   if (res) {
      //     this.$toast('修改成功');
      //     this.getAbnormal();
      //   } else {
      //     // this.$toast('修改失败');
      //   }
      // }
    },
    onLoad({ uid }) {
      this.uid = uid
      console.log('onload', this.uid);
    },
    async onShow() {
      uni.showLoading({
        title: '加载中'
      });
      await Promise.all([this.getTemperature(this.uid)]);
      uni.hideLoading();
    }
  };
</script>
<style lang="scss">
  .health {
    width: 100%;
    padding: 0 40rpx;

    &-info {
      margin-bottom: 40rpx;
      padding: 40rpx 40rpx;
      width: 100%;
      // height: 240rpx;
      box-sizing: border-box;
      background-color: $uni-color-primary;
      flex-direction: row;
      align-items: center;
      border-radius: 16rpx;
      box-shadow: 0px 5rpx 30rpx rgb(41 132 248 / 30%);
      color: #fff;

      .title {
        line-height: 2;
      }

      .sub-title,
      text {
        color: #fff;
      }
    }

    .manage {
      width: 50%;
      margin: 0 auto;
      text-align: center;
      display: flex;
      justify-content: space-between;
    }

    .btn {
      margin: 0 auto;
      text-align: center;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 2.5;

      &-icon {
        width: 76rpx;
        height: 76rpx;
        font-size: 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;

        &.primary {
          background-color: $uni-color-primary;
        }

        &.success {
          background-color: $uni-color-success;
        }

        &.warning {
          background-color: $uni-color-warning;
        }

        &.error {
          background-color: $uni-color-error;
        }
      }

      text {
        font-size: 26rpx;
      }
    }

    .title {
      // display: inline-block;
      // margin-top: 10rpx;
      font-size: 36rpx;
      line-height: 100rpx;
      font-weight: 500;
    }

    .sub-title {
      font-size: 24rpx;
      color: $uni-sub-text-color;
    }

    .charts {
      margin: 40rpx auto;
      padding: 20rpx;
      width: calc(100% - 40rpx);
      background-color: rgba(255, 255, 255, 1);
      border-radius: 24rpx;
      box-shadow: 0px 0px 30rpx rgb(41 132 248 / 10%);
    }

    .charts-box {
      position: relative;
      width: calc(100% - 100rpx);
      margin: 0 auto;
    }

    .chartsview {
      width: auto;
    }

    .ml12 {
      margin-left: 24rpx;
    }

    .mb12 {
      margin-bottom: 12px;
    }

    &-dialog {
      width: 100%;
    }

    .uni-dialog-input {
      // flex: 1;
      font-size: 14px;
      border: 1px #eee solid;
      height: 40px;
      padding: 0 10px;
      border-radius: 5px;
      color: #555;
    }
  }
</style>